<template>
  <div class="row items-center"
       @mouseenter="headHover = true"
       @mouseleave="headHover = false">
    <div v-if="user.head && head && size >= 16" class="relative-position">
      <img class="border-radius-round" :src="headUrl" :width="size" :height="size"/>
      <q-icon v-if="size >= 32 && user.is_staff"
              color="white"
              name="person"
              style="position: absolute;right: 0;bottom: 0;border: 2px solid #fff"
              class="bg-primary border-radius-round size-12"></q-icon>
    </div>
    <div v-else-if="head && size >= 16"
         class="bg-negative text-white flex flex-center border-radius-round"
         :style="{height: size+'px', width: size +'px', fontSize: fontSize}"> {{ user.username[0].toUpperCase() }}
    </div>
    <div v-if="username" class="q-ml-xs">
      <div :class="{'size-18': size >= 48, 'bold': size >= 48}">{{ user.username }}
        <q-chip v-if="level" dense color="negative" square>{{ user.level }}级</q-chip>
      </div>
      <div v-if="slogan && size>24" class="text-grey-6 size-14">{{ user.slogan }}</div>
    </div>
    <slot></slot>
    <q-menu v-if="popover" v-model="hover" @show="getStatistic">
      <div class="q-pa-md" @mouseenter="popoverHover = true" @mouseleave="popoverHover = false">
        <div class="row items-center q-mb-md" style="min-width: 360px">
          <div class="cursor-pointer" @click="$router.push('/people/'+user.id)">
            <div v-if="user.head" class="relative-position">
              <img class="border-radius-round" :src="headUrl" width="48" height="48"/>
              <q-icon v-if="size >= 32 && user.is_staff"
                      color="white"
                      name="person"
                      style="position: absolute;right: 0;bottom: 0;border: 2px solid #fff"
                      class="bg-primary border-radius-round size-16"></q-icon>
            </div>
            <div v-else-if="head"
                 class="bg-negative text-white flex flex-center size-26 border-radius-round"
                 :style="{height: '48px', width: '48px'}"> {{ user.username[0].toUpperCase() }}
            </div>
          </div>
          <div class="q-ml-sm col">
            <div class="bold size-18 text-grey-9 row items-center">
              <div class="col cursor-pointer" @click="$router.push('/people/'+user.id)">
                <span class="q-mr-xs">{{ user.username }}</span>
                <q-chip dense color="negative" square>{{ user.level }}级</q-chip>
                <q-chip v-if="user.is_staff" icon="person" dense color="negative" square>管理员</q-chip>
              </div>
              <q-chip dense square color="blue-1" text-color="primary" class="size-12 bg-blue-right">
                <span v-if="followRelation === 3">相互关注</span>
                <span v-else-if="followRelation === 2">他关注你</span>
              </q-chip>
            </div>
            <div class="size-14 text-grey-7">{{ user.slogan }}</div>
          </div>
        </div>
        <div class="border-top-1-eee q-py-md relative-position" style="min-height: 80px">
          <div v-if="statistic" class="row justify-around">
            <div class="text-center">
              <div class="text-grey-7">地图</div>
              <div class="bold size-18">{{ statistic.map_number }}</div>
            </div>
            <!--<div class="text-center">-->
            <!--<div class="text-grey-7">协作</div>-->
            <!--<div class="bold size-18">{{ statistic.mapmember_number }}</div>-->
            <!--</div>-->
            <div class="text-center">
              <div class="text-grey-7">讨论</div>
              <div class="bold size-18">{{ statistic.forum_number }}</div>
            </div>
            <div class="text-center">
              <div class="text-grey-7">关注</div>
              <div class="bold size-18">{{ statistic.followed_number }}</div>
            </div>
            <div class="text-center">
              <div class="text-grey-7">被赞</div>
              <div class="bold size-18">{{ statistic.up_count }}</div>
            </div>
            <!--<div class="text-center">-->
            <!--<div class="text-grey-7">被收藏</div>-->
            <!--<div class="bold size-18">{{ statistic.collect_number }}</div>-->
            <!--</div>-->
          </div>
          <a-loading :visible="!statistic"></a-loading>
        </div>
        <div class="row justify-between" v-if="auth && auth.id !== user.id && followRelation !== null">
          <div class="col-6 q-pr-sm">
            <q-btn outline color="primary" class="full-width" @click="follow">
              <span v-if="!followRelation || followRelation === 0 || followRelation === 2">关注</span>
              <span v-else>取消关注</span>
            </q-btn>
          </div>
          <div class="col-6 q-pl-sm">
            <q-btn outline color="primary" class="full-width" @click="openMessageDialog">私信</q-btn>
          </div>
        </div>
      </div>
    </q-menu>
  </div>
</template>

<script>
  export default {
    name: 'aHead',
    props: {
      user: {
        type: Object,
        required: true
      },
      size: {
        type: Number,
        required: false,
        default: 32
      },
      username: {
        type: Boolean,
        required: false,
        default: true
      },
      head: {
        type: Boolean,
        required: false,
        default: true
      },
      slogan: {
        type: Boolean,
        required: false,
        default: true
      },
      level: {
        type: Boolean,
        required: false,
        default: false
      },
      popover: {
        type: Boolean,
        required: false,
        default: true
      }
    },
    data () {
      return {
        hover: false,
        headHover: false,
        popoverHover: false,
        followRelation: null,
        statistic: null
      }
    },
    computed: {
      fontSize () {
        const size = this.size
        if (size >= 48) {
          return '24px'
        } else if (size >= 32) {
          return '16px'
        } else if (size >= 24) {
          return '14px'
        } else if (size >= 16) {
          return '12px'
        }
        return null
      },
      headUrl () {
        const head = this.user.head
        if (!head) {
          return ''
        } else if (head.includes('http')) {
          return head
        } else {
          return '/media/' + head
        }
      }
    },
    watch: {
      headHover (hover) {
        this.hover = hover || this.popoverHover
      },
      popoverHover (hover) {
        this.hover = hover || this.headHover
      },
      hover (value) {
        if (value) {
          this.$bus.$emit('headPopoverHover', this.user)
        }
      }
    },
    created () {
      this.$bus.$on('headPopoverHover', (user) => {
        if (user.id !== this.user.id) {
          this.hover = false
        }
      })
    },
    methods: {
      openMessageDialog () {
        this.$bus.$emit('openMessageDialog', this.user)
      },
      async follow () {
        const { status, data } = await this.postRequest({
          api: '/api/user/follow/',
          data: { user_id: this.user.id }
        })

        if (status === 200) {
          this.followRelation = data.relation
        } else {
          this.$q.notify('发生未知错误，请重试！')
        }
      },
      async getStatistic () {
        if (this.statistic) {
          return null
        }

        const { status, data } = await this.getRequest({
          api: '/api/user/{id}/statistic/',
          id: this.user.id,
          instance: 'statistic'
        })

        if (status === 200) {
          this.followRelation = data.relation
        }
      }
    }
  }
</script>

<style lang="stylus">
  .q-chip__icon
    color #ffffff !important

  .q-chip
    color #ffffff !important

  .bg-blue-right
    height 2px !important
</style>
